<template>
    <main class="page-bg" id="canvasDom">
        <header class="header flex-center">
            <span>————《</span>互联网资源系统<span>》————</span>
        </header>
        <header class="head-tool" data-html2canvas-ignore="true">
            <ScreenshotKit :downloadName="'互联网资源系统'" />
        </header>
        <section class="page-main">
            <n-grid :x-gap="12" :y-gap="4" :cols="3">
                <!-- left -->
                <n-gi>
                    <n-flex vertical>
                        <section class="large-box">
                            <section class="corner">
                                <span class="corner-top-left"></span>
                                <span class="corner-top-right"></span>
                                <span class="corner-bottom-left"></span>
                                <span class="corner-bottom-right"></span>
                            </section>
                            <header class="box-title flex-center"><span>数据增长趋势</span></header>
                            <section class="canvas-box">
                                <LineBar v-if="baShow" :canvasHeight="35" :data="lineBarData" />
                            </section>
                        </section>
                        <section class="large-box">
                            <section class="corner">
                                <span class="corner-top-left"></span>
                                <span class="corner-top-right"></span>
                                <span class="corner-bottom-left"></span>
                                <span class="corner-bottom-right"></span>
                            </section>
                            <header class="box-title flex-center"><span>数据来源</span></header>
                            <section class="canvas-box">
                                <TansverseBar2 v-if="baShow" :canvasHeight="37" :data="tansverseBar2" />
                            </section>
                        </section>
                    </n-flex>
                </n-gi>
                <!-- center -->
                <n-gi>
                    <n-flex vertical>
                        <section class="center-small-box">
                            <section class="corner">
                                <span class="corner-top-left"></span>
                                <span class="corner-top-right"></span>
                                <span class="corner-bottom-left1"></span>
                                <span class="corner-bottom-right1"></span>
                            </section>
                            <header class="header-line flex-center"><span></span></header>
                            <n-grid x-gap="12" :cols="2">
                                <n-gi class="samll-box-content flex-center">
                                    <p>数据总量</p>
                                    <p>753666</p>
                                </n-gi>
                                <n-gi class="samll-box-content flex-center">
                                    <p>累计浏览量</p>
                                    <p>8832435</p>
                                </n-gi>
                            </n-grid>
                        </section>
                        <section class="center-middle-box">
                            <section class="corner">
                                <span class="corner-top-left"></span>
                                <span class="corner-top-right"></span>
                                <span class="corner-bottom-left2"></span>
                                <span class="corner-bottom-right2"></span>
                            </section>
                            <header class="box-title flex-center"><span>高频词</span></header>
                            <section class="canvas-box">
                                <WordCloud v-if="baShow" :canvasHeight="32" :data="wordCloudData" />
                            </section>
                        </section>
                        <section class="center-middle-box">
                            <section class="corner">
                                <span class="corner-top-left"></span>
                                <span class="corner-top-right"></span>
                                <span class="corner-bottom-left2"></span>
                                <span class="corner-bottom-right2"></span>
                            </section>
                            <header class="box-title flex-center"><span>最新文献</span></header>
                            <section class="canvas-box">
                                <section v-for="(item, i) in newList" :key="i" class="content-text flex-between">
                                    <p>
                                        <Navigate class="text-icon" />
                                        {{ item.title }}
                                    </p>
                                    <span>{{ item.time }}</span>
                                </section>
                            </section>
                        </section>
                    </n-flex>
                </n-gi>
                <!-- right -->
                <n-gi>
                    <n-flex vertical>
                        <section class="large-box">
                            <section class="corner">
                                <span class="corner-top-left"></span>
                                <span class="corner-top-right"></span>
                                <span class="corner-bottom-left"></span>
                                <span class="corner-bottom-right"></span>
                            </section>
                            <header class="box-title flex-center"><span>主题词</span></header>
                            <section class="canvas-box">
                                <TansverseBar v-if="baShow" :canvasHeight="35" :data="tansverseBar" />
                            </section>
                        </section>
                        <section class="large-box">
                            <section class="corner">
                                <span class="corner-top-left"></span>
                                <span class="corner-top-right"></span>
                                <span class="corner-bottom-left"></span>
                                <span class="corner-bottom-right"></span>
                            </section>
                            <header class="box-title flex-center"><span>数据分类</span></header>
                            <section class="canvas-box">
                                <LoopPie v-if="baShow" :canvasHeight="35" :data="loopPieData" />
                            </section>
                        </section>
                    </n-flex>
                </n-gi>
            </n-grid>
        </section>
    </main>
    
  </template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import LineBar from '@/components/charts2/LineBar.vue'
import TansverseBar from '@/components/charts2/TansverseBar.vue'
import TansverseBar2 from '@/components/charts2/TansverseBar2.vue'
import LoopPie from '@/components/charts2/LoopPie.vue'
import WordCloud from '@/components/charts2/WordCloud.vue'
import { Navigate,ImagesOutline,ExitOutline } from '@vicons/ionicons5'
import ScreenshotKit from '@/components/common/ScreenshotKit.vue';
const baShow = ref(false)
const max = 500
const min = 1
let lineBarData = reactive({
    xAxisDataList: <Array<string>>[],
    lineSeriesDataList: <Array<number>>[],
    barSeriesDataList: <Array<number>>[],
})
let tansverseBar = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<number>>[],
})
let tansverseBar2 = reactive({
    xAxisDataList: <Array<string>>[],
    seriesDataList: <Array<number>>[],
})
let loopPieData = reactive({
    seriesDataList: <Array<object>>[],
})
let wordCloudData = reactive({
    seriesDataList: <Array<object>>[],
})
let newList = reactive(<Array<object>>[])
let initData = () => {
    for (let index = 0; index < 10; index++) {
        let num1 = Math.floor(Math.random() * (max - min + 1)) + min;
        let num2 = Math.floor(Math.random() * (100 - 50 + 1)) + min;
        lineBarData.xAxisDataList.push('202'+index)
        lineBarData.lineSeriesDataList.push((num2/100))
        lineBarData.barSeriesDataList.push(num1)
    }

    let list = [
        { name: "快到圈里来游戏", players: 9927},
        { name: "烦恼压缩包游戏", players: 8277},
        { name: "挑战10秒游戏", players: 7933},
        { name: "金鱼捞捞乐游戏", players: 7182},
        { name: "烦恼丢丢丢游戏", players: 5768},
        { name: "欢乐高尔夫游戏", players: 4827},
        { name: "套住欢乐游戏", players: 4535},
        { name: "欢乐投篮游戏", players: 4000},
        { name: "菠萝大作战游戏", players: 3839},
        { name: "智取靶心游戏", players: 3600},
    ]
    tansverseBar.xAxisDataList = list.map(m=> {return m.name})
    tansverseBar.seriesDataList = list.map(m=> {return m.players})

    let list2 = [
        {title: "枕头大战游戏", nums: 3895},
        {title: "家庭COS秀游戏", nums: 3782},
        {title: "跳跃百分百游戏", nums: 2900},
        {title: "蹴鞠大挑战游戏", nums: 2574},
        {title: "奔跑吧行李箱游戏", nums: 2200},
        {title: "趣味丢丢乐游戏", nums: 2000},
        {title: "爱心连连看游戏", nums: 1974},
        {title: "迷宫大作战游戏", nums: 1500},
        {title: "趣味保龄球游戏", nums: 12234},
        {title: "趣味足球游戏", nums: 1000},
    ]  
    tansverseBar2.xAxisDataList = list2.map(m=> {return m.title})
    tansverseBar2.seriesDataList = list2.map(m=> {return m.nums})

    loopPieData.seriesDataList = [
        {name: "科研机构", value: 500},
        {name: "新闻动态", value: 400},
        {name: "智库", value: 100},
        {name: "科技文献", value: 400},
        {name: "政府", value: 90},
        {name: "企业&大学", value: 300},
    ]
    let colors = ['#2ceded', '#f6b768', '#ff714a', '#e70e65', '#b347ff', '#7049f0']
    let i = Math.floor(Math.random() * (6 - 1 + 1)) + 1;
    let list3 = [
        { value: '20', name: 'VIVO' },
        { value: '19', name: 'OPPO' },
        { value: '18', name: 'HONOR' },
        { value: '17', name: 'iPhone 12 pro max' },
        { value: '16', name: 'iPhone 12 pro max' },
        { value: '15', name: 'HUAWEI MATE 10' },
        { value: '14', name: 'ONEPLUS' },
        { value: '13', name: 'Lenova T470' },
        { value: '12', name: 'MacBook Air ' },
        { value: '11', name: 'SAMSUNG' },
        { value: '10', name: 'iPad mini' },
        { value: '8', name: 'BLACKBERRY' },
        { value: '8', name: 'OPPO' },
        { value: '8', name: 'SAMSUNG' },
        { value: '8', name: '361' },
        { value: '10', name: 'Lenova' }
].map((m:any, i: number) => {m['textStyle'] = {color: colors[i< 6 ? i : i%6]}; return m })
    wordCloudData.seriesDataList = list3
    let nlist = []
    for (let index = 0; index < 10; index++) {
        nlist.push({title: "大河汤汤，华夏根魂"+index, time: "2024-6-18"})    
    }
    newList.push(...nlist)
    

    baShow.value = true
}
initData()

</script>


<style scoped>
.page-bg {
    width: 100%;
    height: 100vh;
    background-color: #132950;
}
.header {
    width: 100%;
    height: 10vh;
    color: #bbe2f4;
    font-size: 24px;
    font-weight: 600;
}
.header span:first-child {
    margin-right: 50px;
    color: #bbe2f4;
}
.header span:last-child {
    margin-left: 50px;
    color: #bbe2f4;
}
.page-main {
    min-height: 90vh;
    margin: 10px;
    box-sizing: border-box;
}
.large-box {
    width: 100%;
    height: 42vh;
    background-color: #152a4d;
    border: 1px solid #445571;
    position: relative;
}
.center-small-box {
    width: 100%;
    height: 16vh;
    background-color: #152a4d;
    border: 1px solid #445571;
    position: relative;
}
.center-middle-box {
    width: 100%;
    height: 33.5vh;
    background-color: #152a4d;
    border: 1px solid #445571;
    position: relative;
}
.corner {
    width: 100%;
    position: relative;
    top: 0;
    z-index: 1;
}
.corner-top-left {
    padding-right: 15px;
    border-left: 1px solid #11cb92;
    border-top: 1px solid #11cb92;
}
.corner-top-right {
    padding-right: 15px;
    border-right: 1px solid #11cb92;
    border-top: 1px solid #11cb92;
    position: relative;
    right: 0;
    left: 95%;
}
.corner-bottom-left {
    padding-left: 15px;
    border-left: 1px solid #11cb92;
    border-bottom: 1px solid #11cb92;
    position: relative;
    bottom: 0;
    left: -32px;
    top: 40vh;
}
.corner-bottom-right {
    padding-right: 15px;
    border-right: 1px solid #11cb92;
    border-bottom: 1px solid #11cb92;
    position: relative;
    bottom: 0;
    left: 90%;
    top: 40vh;
}
.corner-bottom-left1 {
    padding-left: 15px;
    border-left: 1px solid #11cb92;
    border-bottom: 1px solid #11cb92;
    position: relative;
    bottom: 0;
    left: -34px;
    top: 14vh;
}
.corner-bottom-right1 {
    padding-right: 15px;
    border-right: 1px solid #11cb92;
    border-bottom: 1px solid #11cb92;
    position: relative;
    bottom: 0;
    left: 90%;
    top: 14vh;
}
.corner-bottom-left2 {
    padding-left: 15px;
    border-left: 1px solid #11cb92;
    border-bottom: 1px solid #11cb92;
    position: relative;
    bottom: 0;
    left: -34px;
    top: 31.5vh;
}
.corner-bottom-right2 {
    padding-right: 15px;
    border-right: 1px solid #11cb92;
    border-bottom: 1px solid #11cb92;
    position: relative;
    bottom: 0;
    left: 90%;
    top: 31.5vh;
}
.header-line {
    width: 100%;
    height: 5px;
    margin-top: -22px;
}
.header-line span {
    width: 200px;
    height: 5px;
    background-color: #2b7c8d;
}
.box-title {
    width: 100%;
    height: 30px;
    margin-top: -22px;
}
.box-title span {
    padding: 5px 20px;
    background-color: #1c4d6c;
    color: #0bb5bc;
}
.canvas-box {
    width: 100%;
    height: 280px;
    margin-top: 8px;
}
.samll-box-content {
    width: 100%;
    margin-top: 50px;
    flex-wrap: wrap;
    color: #00fff3;
    box-sizing: border-box;
}
.samll-box-content p {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.samll-box-content p:first-child {
    font-size: 14px;
}
.samll-box-content p:last-child {
    font-size: 30px;
    font-weight: 600;
}
.content-text {
    font-size: 14px;
    margin: 5px 10px;
    color: #20d6d3;
}
.text-icon {
    width: 12px;
    height: 12px;
    color: #20d6d3;
}
.content-text span {
    font-size: 12px;
    color: #1b8aa3;
}
.head-tool {
    position: absolute;
    right: 30px;
    top: 20px;
}

</style>
